<template>
  <!-- 最外层页面于窗口同宽，使聊天面板居中 -->
  <div class="home-view">
    <!-- 整个聊天面板 -->
    <div class="chat-panel" style="height: 80vh;">
      <!-- 右侧的消息记录 -->
      <div class="message-panel">
        <div class="message-header">
          <div class="title">客服中心</div>
        </div>
        <div class="message-list">
          <el-card class="list" v-for="(message, index) in messages" :key="index">
            <div slot="header" class="clearfix">
              <span>{{ index + 1 }} {{ message.userName }} {{ message.lastTime }}</span>
              <el-button style="float: right;" type="text" @click="deleteMessage(index)">删除</el-button>
            </div>
            <p>{{ message.text }}</p>
          </el-card>
        </div>
        <div class="my-message-input">
          <el-input v-model="input"
                    :autosize="false"
                    :rows="3"
                    resize="none"
                    type="textarea"
                    placeholder="请输入留言内容"></el-input>
          <div class="button-wrapper">
            <el-button class="button-wrapper" @click="addMessage" type="primary" style="padding-left: 20px;">发送消息
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import store from "@/store";
  import { listSession, getSession, delSession, addSession, updateSession } from "@/api/system/session";

  export default {
    computed: {
      store() {
        return store
      }
    },
    data() {
      return {
        messages: [],
        input: ''
      }
    },
    mounted() {
      this.getList();
    },
    created(){
      this.dataRefreh();
    },
    destroyed(){
      // 在页面销毁后，清除计时器
      this.clear();
    },
    methods: {
      dataRefreh() {
        // 计时器正在进行中，退出函数
        if (this.intervalId != null) {
          return;
        }
        // 计时器为空，操作
        this.intervalId = setInterval(() => {
          this.getList(); //加载数据函数
        }, 5000);
      },
      // 停止定时器
      clear() {
        clearInterval(this.intervalId); //清除计时器
        this.intervalId = null; //设置为null
      },
      getList() {
        this.loading = true;
        let q = {
          type: 2,
          userId: store.getters.userId
        }
        listSession(q).then(response => {
          this.messages = response.rows;
          this.loading = false;
        });
      },
      addMessage() {
        let data = {
          userName:store.getters.name,
          text:this.input,
          LastTime:new Date().toLocaleString(),
          userId:store.getters.userId,
          type: 2
        }
        addSession(data).then(
          () => {
            this.getList()
            this.input = ''
          }
        )
      },
      // deleteMessage(index) {
      //   this.messages.splice(index, 1)
      // }
    }
  }
</script>
<style lang="scss" scoped>
  .home-view {
    display: flex;
    /* 与窗口同宽 */
    width: 100vw;
    /* 水平方向上剧中 */
    justify-content: center;
    /* 聊天窗口面板 */
    .chat-panel {
      /* 聊天面板flex布局，让会话列表和聊天记录左右展示 */
      display: flex;
      /* 让聊天面板圆润一些 */
      border-radius: 20px;
      background-color: white;
      /* 给一些阴影 */
      box-shadow: 0 0 20px 20px rgba(black, 0.05);
      /* 与上方增加一些间距 */
      margin-top: 20px;
      /* 与上方增加一些间距 */
      margin-bottom: 20px;
      /* 左侧聊天会话面板*/
      .session-panel {
        background-color: rgb(231, 248, 255);
        width: 300px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        padding: 20px;
        position: relative;
        border-right: 1px solid rgba(black, 0.07);
        /* 标题*/
        .title {
          margin-top: 20px;
          font-size: 20px;
        }

        /* 描述*/
        .description {
          color: rgba(black, 0.7);
          font-size: 10px;
          margin-top: 10px;
        }
      }

      /* 右侧消息记录面板高宽配置*/
      .message-panel {
        width: 1000px;
        .message-list {
          width: 1000px;
          height: 60vh;
          padding: 15px;
          // 消息条数太多时，溢出部分滚动
          overflow-y: scroll;
          // 当切换聊天会话时，消息记录也随之切换的过渡效果
          .list-enter-active,
          .list-leave-active {
            transition: all 0.5s ease;
          }

          .list-enter-from,
          .list-leave-to {
            opacity: 0;
            transform: translateX(30px);
          }
        }
      }

      .my-message-input {
        padding: 20px;
        border-top: 1px solid rgba(black, 0.07);
        border-left: 1px solid rgba(black, 0.07);
        border-right: 1px solid rgba(black, 0.07);
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
      }

      .button-wrapper {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
      }
    }

  }

</style>
